<template>
    <div style="min-width:1300px;">

        <chamNavigate ref="tougaoNavi" @selectedTougaoNavigaterChange="_selectedTougaoNavigaterChange"></chamNavigate>


        <div v-if="selectedTougaoNavigater==1">
            <putongTougao @naviIndexChange="_naviIndexChange"></putongTougao>
<!--            <div class="tougao-middle" style="padding-left:20px;">-->
<!--                <div style="width:100%;min-height:40px;color:#222222;display:flex;margin-top:20px;">-->
<!--                    <h1>文件上传</h1>-->
<!--                    <span style="color:#666666;margin-top:10px;">-->
<!--                <p>（单次最多允许上传1部视频，推荐采用mp4、flv格式，可有效缩短审核转码耗时）</p>-->
<!--            </span>-->
<!--                </div>-->
<!--                <el-upload-->
<!--                    action="#"-->
<!--                    :auto-upload="false"-->
<!--                    accept=".mp4"-->
<!--                    :on-change="beforeFileUpload"-->
<!--                    :limit="1"-->
<!--                    list-type="picture">-->
<!--                    <div style="margin-top:10px;">-->
<!--                        <el-button size="small" type="primary"><i class="el-icon-plus"></i>添加视频</el-button>-->
<!--                    </div>-->

<!--                    &lt;!&ndash;            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>&ndash;&gt;-->
<!--                </el-upload>-->

<!--                <el-divider></el-divider>-->

<!--                <div style="width:100%;min-height:40px;color:#222222;">-->
<!--                    <h1>基本信息</h1>-->
<!--                    &lt;!&ndash;            <div style="color:#101010;margin-top:20px;display:flex;">&ndash;&gt;-->
<!--                    &lt;!&ndash;                <h3>视频封面设置</h3>&ndash;&gt;-->
<!--                    &lt;!&ndash;                <span style="color:#666666;margin-top:2px;">&ndash;&gt;-->
<!--                    &lt;!&ndash;                    <p>（格式jpeg、png，文件大小≤5MB，请上传3张图片用于视频展示时的封面）</p>&ndash;&gt;-->
<!--                    &lt;!&ndash;                </span>&ndash;&gt;-->
<!--                    &lt;!&ndash;            </div>&ndash;&gt;-->

<!--                    <div style="color:#101010;margin-top:20px;">-->
<!--                        <h3><span style="color:red;">*</span>视频封面设置</h3>-->
<!--                        <span style="color:#666666;margin-top:2px;">-->
<!--                    <p>（格式jpeg、png，文件大小≤5MB，请上传3张图片用于视频展示时的封面）</p>-->
<!--                </span>-->
<!--                    </div>-->

<!--                    <div style="width:100%;float:left;margin-bottom:20px;">-->



<!--                        <div style="width:25%;float:left;">-->
<!--                            <el-upload style="margin:20px auto 10px 0"-->
<!--                                       class="avatar-uploader"-->
<!--                                       accept=".jpg,jpeg,.png"-->
<!--                                       action="#"-->
<!--                                       :auto-upload="false"-->
<!--                                       :show-file-list="false"-->
<!--                                       :on-change="function(file, fileList){ return beforeCoverImgUpload(file,1)}"-->
<!--                            >-->
<!--                                <img v-if="videoCoverImgUrl220x125" :src="videoCoverImgUrl220x125" class="avatar">-->
<!--                                <i v-else class="el-icon-plus avatar-uploader-icon">-->
<!--                                </i>-->

<!--                            </el-upload>-->
<!--                            <div>(宽度220px,高度125px图片)</div>-->
<!--                        </div>-->

<!--&lt;!&ndash;                        <div style="width:25%;float:left;">&ndash;&gt;-->
<!--&lt;!&ndash;                            <el-upload style="margin:20px auto 10px 0"&ndash;&gt;-->
<!--&lt;!&ndash;                                       class="avatar-uploader"&ndash;&gt;-->
<!--&lt;!&ndash;                                       accept=".jpg,jpeg,.png"&ndash;&gt;-->
<!--&lt;!&ndash;                                       action="#"&ndash;&gt;-->
<!--&lt;!&ndash;                                       :auto-upload="false"&ndash;&gt;-->
<!--&lt;!&ndash;                                       :show-file-list="false"&ndash;&gt;-->
<!--&lt;!&ndash;                                       :on-change="function(file, fileList){ return beforeCoverImgUpload(file,2)}"&ndash;&gt;-->
<!--&lt;!&ndash;                            >&ndash;&gt;-->
<!--&lt;!&ndash;                                <img v-if="videoCoverImgUrl325x246" :src="videoCoverImgUrl325x246" class="avatar">&ndash;&gt;-->
<!--&lt;!&ndash;                                <i v-else class="el-icon-plus avatar-uploader-icon">&ndash;&gt;-->
<!--&lt;!&ndash;                                </i>&ndash;&gt;-->

<!--&lt;!&ndash;                            </el-upload>&ndash;&gt;-->
<!--&lt;!&ndash;                            <div>(宽度325px,高度246px图片)</div>&ndash;&gt;-->
<!--&lt;!&ndash;                        </div>&ndash;&gt;-->

<!--                        <div style="width:33%;float:left;">-->
<!--                            <el-upload style="margin:20px auto 10px 0"-->
<!--                                       class="avatar-uploader_300x130"-->
<!--                                       accept=".jpg,jpeg,.png"-->
<!--                                       action="#"-->
<!--                                       :auto-upload="false"-->
<!--                                       :show-file-list="false"-->
<!--                                       :on-change="function(file, fileList){ return beforeCoverImgUpload(file,3)}"-->
<!--                            >-->
<!--                                <img v-if="videoCoverImgUrl470x200" :src="videoCoverImgUrl470x200" class="avatar_300x130">-->
<!--                                <i v-else class="el-icon-plus avatar-uploader-icon_300x130">-->
<!--                                </i>-->

<!--                            </el-upload>-->
<!--                            <div>(宽度470px,高度200px图片)</div>-->
<!--                        </div>-->

<!--                        <div style="width:17%;float:left;">-->
<!--                            <el-upload style="margin:70px auto 10px 0"-->
<!--                                       class="avatar-uploader_80"-->
<!--                                       accept=".jpg,jpeg,.png"-->
<!--                                       action="#"-->
<!--                                       :auto-upload="false"-->
<!--                                       :show-file-list="false"-->
<!--                                       :on-change="function(file, fileList){ return beforeCoverImgUpload(file,4)}"-->
<!--                            >-->
<!--                                <img v-if="videoCoverImgUrl80x80" :src="videoCoverImgUrl80x80" class="avatar_80">-->
<!--                                <i v-else class="el-icon-plus avatar-uploader-icon_80">-->
<!--                                </i>-->

<!--                            </el-upload>-->
<!--                            <div>(宽度80px,高度80px图片)</div>-->
<!--                        </div>-->

<!--                    </div>-->

<!--                    <div style="color:#101010;margin-top:20px;">-->
<!--                        <h3><span style="color:red;">*</span>视频分区</h3>-->
<!--                        <div style="margin-top:10px;">-->
<!--                            <el-cascader-->
<!--                                v-model="chamVideoForm.videoFenqu"-->
<!--                                :options="options"-->
<!--                                separator=" → "></el-cascader>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div style="color:#101010;margin-top:20px;">-->
<!--                        <h3><span style="color:red;">*</span>视频标题</h3>-->
<!--                        <div style="margin-top:10px;">-->
<!--                            <el-input v-model="chamVideoForm.videoTitle"/>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div style="color:#101010;margin-top:20px;">-->
<!--                        <h3><span style="color:red;">*</span>视频简介</h3>-->
<!--                        <div style="margin-top:10px;">-->
<!--                            <el-input-->
<!--                                type="textarea"-->
<!--                                :rows="6"-->
<!--                                v-model="chamVideoForm.videoSummary"-->
<!--                            >-->
<!--                            </el-input>-->
<!--                        </div>-->
<!--                    </div>-->






<!--                    <div style="margin-top:20px;margin-bottom:60px;">-->
<!--                        <el-button type="primary" @click="doSubmit" :loading="isTougaoLoading">立即投稿</el-button>-->
<!--                    </div>-->
<!--                </div>-->

<!--            </div>-->

            <!--稿件投递成功的div，先隐藏掉-->
<!--            <div  class="tougao-middle" style="padding-left:10px;">-->
<!--                <div style="width:100%;min-height:40px;color:#222222;display:flex;margin:20px auto auto auto">-->
<!--                    <h1 style="margin:auto auto">稿件投递成功</h1>-->
<!--                </div>-->
<!--                <div style="width:286px;height:237px;margin:20px auto auto auto">-->
<!--                    <img src="../../assets/tougaochengong.png" height="237" width="286" style="margin:auto auto"/>-->
<!--                </div>-->
<!--                <el-divider></el-divider>-->
<!--                <div style="width:286px;height:40px;margin:auto auto">-->
<!--                    <div style="width:220px;height:40px;margin:auto auto">-->
<!--                        <el-button plain style="margin:auto auto">查看稿件</el-button>-->
<!--                        <el-button plain>再投一个</el-button>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>

        <div v-if="selectedTougaoNavigater==2">
            <xinfanTougao @naviIndexChange="_naviIndexChange"></xinfanTougao>
        </div>

        <div v-if="selectedTougaoNavigater==3">
            <specialVideoTougao></specialVideoTougao>
        </div>

        <div v-if="selectedTougaoNavigater==4">
            <gaojianGuanli></gaojianGuanli>
        </div>

        <div v-if="selectedTougaoNavigater==5">
            <xinfanFenzu></xinfanFenzu>
        </div>

        <div v-if="selectedTougaoNavigater==6">
            <putongFenzu></putongFenzu>
        </div>


        <!--        <div v-if="selectedTougaoNavigater==2" style=" width:999px;float:left;min-height:500px;border-left: 1px solid #f4f4f4;">-->

<!--            <div style="width:100%;min-height:40px;color:#222222;display:flex;margin-left:20px;margin-top:20px;">-->
<!--                <h1>稿件管理</h1>-->
<!--            </div>-->


<!--            <div style="width:800px;margin-left:20px;height:28px;margin-bottom:25px;line-height:28px;">-->
<!--                <el-link :underline="false" style="margin:10px 20px 0 0" v-bind:style="{'color':naviSecondSelectIndex==0?'#409eff':''}" @click="goNaviSecond(0)">全部稿件(1)</el-link>-->
<!--                <el-link :underline="false" style="margin:10px 20px 0 0" v-bind:style="{'color':naviSecondSelectIndex==1?'#409eff':''}" @click="goNaviSecond(1)">进行中(0)</el-link>-->
<!--                <el-link :underline="false" style="margin:10px 20px 0 0" v-bind:style="{'color':naviSecondSelectIndex==2?'#409eff':''}" @click="goNaviSecond(2)">已通过(0)</el-link>-->
<!--                <el-link :underline="false" style="margin:10px 20px 0 0" v-bind:style="{'color':naviSecondSelectIndex==3?'#409eff':''}" @click="goNaviSecond(3)">未通过(0)</el-link>-->
<!--            </div>-->

<!--            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">-->
<!--                <tougaoShow v-if="res.length>0" :videoInfo="res[0]"></tougaoShow>-->
<!--            </div>-->

<!--            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">-->
<!--                <tougaoShow v-if="res.length>0" :videoInfo="res[1]"></tougaoShow>-->
<!--            </div>-->

<!--            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">-->
<!--                <tougaoShow v-if="res.length>0" :videoInfo="res[2]"></tougaoShow>-->
<!--            </div>-->

<!--            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">-->
<!--                <tougaoShow v-if="res.length>0" :videoInfo="res[3]"></tougaoShow>-->
<!--            </div>-->

<!--            <div style="width:900px;height:150px;margin:15px auto 15px 20px;box-shadow: 0 0 4px rgba(0,0,0,.2);border-radius:4px;">-->
<!--                <tougaoShow v-if="res.length>0" :videoInfo="res[4]"></tougaoShow>-->
<!--            </div>-->

<!--            <div style="width:900px; height: 60px; margin: 10px auto;">-->
<!--                &lt;!&ndash;页面底部分页效果&ndash;&gt;-->
<!--                <el-pagination style="margin-right:160px;"-->
<!--                               background-->
<!--                               layout="total,prev, pager, next"-->
<!--                               :page-size="5"-->
<!--                               :total="1000">-->
<!--                </el-pagination>-->
<!--            </div>-->
<!--        </div>-->

    </div>

</template>

<script>

    import tougaoShow from '@/components/tougao/tougaoShow';
    import chamNavigate from '@/components/tougao/tougaoNavigate';
    import putongTougao from '@/components/tougao/putongTougao';
    import xinfanTougao from '@/components/tougao/xinfanTougao';
    import specialVideoTougao from '@/components/tougao/specialVideoTougao';
    import gaojianGuanli from '@/components/tougao/gaojianGuanli';
    import xinfanFenzu from '@/components/tougao/xinfanFenzu';
    import putongFenzu from '@/components/tougao/putongFenzu';

    export default {
        name: "tougaoMiddle",
        components:{
            tougaoShow,
            chamNavigate,
            putongTougao,
            xinfanTougao,
            specialVideoTougao,
            gaojianGuanli,
            xinfanFenzu,
            putongFenzu
        },
        data(){
            return{
                selectedTougaoNavigater:1,
                // videoCoverImgUrl220x125: '',//预览图1
                // // videoCoverImgUrl325x246: '',//预览图2
                // videoCoverImgUrl470x200: '',//预览图3
                // videoCoverImgUrl80x80: '',//预览图4
                // chamVideoForm:{
                //     // videoFile:null,
                //     videoCoverImg80x80:null,
                //     videoCoverImg220x125:null,
                //     // videoCoverImg325x246:null,
                //     videoCoverImg470x200:null,
                //     videoFenqu:'',
                //     videoTitle:'',
                //     videoSummary:''//视频简介
                // },
                // videoSection:[],//视频文件切片
                // uuidList:[],
                // fileName:''

            }
        },
        methods: {
            _selectedTougaoNavigaterChange(newValue){
                this.selectedTougaoNavigater = newValue;
            },
            _naviIndexChange(newIndex){
                this.selectedTougaoNavigater = newIndex;
                this.$refs.tougaoNavi.clickNavigater(newIndex);
                //滚动条返回顶部
                window.scrollTo(0,0);
            }
        }
    }
</script>

<style scoped>

</style>
